import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Determinate Progress

Displays a determinate linear indicator showing the completion progress of a task.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.progress/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
  <Tabs.Tab>
    <Widget name='progress' variant='determinate'/>
  </Tabs.Tab>
  <Tabs.Tab>
    ```dart copy
    class Progress extends StatefulWidget {
      @override
      State<Progress> createState() => _State();
    }

    class _State extends State<Progress> {
      late Timer timer;
      double value = 0.2;

      @override
      void initState() {
        super.initState();
        timer = Timer(const Duration(seconds: 1), () => setState(() => value = 0.7));
      }

      @override
      void dispose() {
        timer.cancel();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) => Column(
        children: [
          FDeterminateProgress(value: value),
          FButton(
            onPress:
                () => setState(() {
                  value = 0.2;
                  timer.cancel();
                  timer = Timer(const Duration(seconds: 1), () => setState(() => value = 0.7));
                }),
            child: const Text('Reset'),
          ),
        ],
      );
    }
    ```

  </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create determinate-progress
```

## Usage

### `FDeterminateProgress(...)`

```dart copy
FDeterminateProgress(
  style: FDeterminateProgressStyle(...),
  semanticsLabel: 'Label',
  value: 0.7,
);
```
